<template>
  <div id="nav">
    <div class="logo flex flex-ai-c">
      <div class="container-1200 flex flex-jc-sp flex-ai-c">
        <router-link to="/home">
          <img v-if="setting" :src="setting.logo" alt="" srcset=""
        /></router-link>

        <div class="flex flex-jc-sp flex-ai-c" style="width: 580px">
          <div>
            <el-input
              placeholder="请输入内容"
              v-model="inputVal"
              class="search-input"
            >
              <el-button
                class="search-btn"
                slot="append"
                icon="el-icon-search"
                @click="submit"
              ></el-button>
            </el-input>
          </div>
          <div
            style="font-size: 18px"
            class="flex flex-jc-c flex-ai-c cursor-p"
          >
            <template v-if="!_userInfo">
              <router-link to="/login">登录</router-link>/<router-link
                to="/login"
                >注册</router-link
              >
            </template>
            <template v-else>
              <div class="flex flex-jc-c flex-ai-c cursor-p" @click="go">
                <img
                  v-if="!_userInfo.avatar"
                  src="~@/assets/images/default-avatar.png"
                  alt=""
                  srcset=""
                  class="avatar"
                />
                <img
                  class="avatar"
                  v-else
                  :src="_userInfo.avatar"
                  alt=""
                  srcset=""
                />
                <h2 class="name">{{ _userInfo.phone || 'user' }}</h2>
              </div>
              <div class="cursor-p" style="margin-left: 12px" @click="exit">
                退出
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="container-1200 flex">
        <router-link
          v-for="item in navigation"
          :key="item.id"
          :to="item.pc_link"
          >{{ item.name }}</router-link
        >
        <!-- <router-link to="/offices">写字楼</router-link>
        <router-link to="/plant">厂房</router-link>
        <router-link to="/share">共享办公</router-link>
        <router-link to="/entrust">委托找房</router-link>
        <router-link to="/launch">投放房源</router-link> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getApiBaseCateList } from '@/api'
import { mapGetters, mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      inputVal: '',
      navigation: [
        {
          id: 0,
          name: '首页',
          thumb: '46',
          m_link: '/',
          pc_link: '/home',
          is_option: 1,
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['_userInfo']),
    ...mapState(['setting', 'searchVal']),
    showSearch() {
      return this.$route.path === '/search' ? false : true
    },
  },
  created() {
    getApiBaseCateList().then((res) => {
      if (res.code === 200) {
        this.navigation = [...this.navigation, ...res.data]
      }
    })
  },
  methods: {
    ...mapMutations(['setSearchVal', 'setUserInfo']),
    go() {
      this.$router.push('/profile')
    },
    submit() {
      // if (!this.inputVal) {
      //   return
      // }
      this.setSearchVal(this.inputVal)
      if (this.$route.path === '/search') {
        return
      }
      this.$router.push(`/search`)
    },
    exit() {
      this.setUserInfo(null)
    },
  },
}
</script>

<style lang="less" scoped>
#nav {
  .logo {
    height: 148px;
    background-color: rgb(255, 255, 255);
  }
  .avatar {
    width: 52px;
    height: 52px;
    border-radius: 99px;
    margin-right: 6px;
  }
  .menu {
    background-color: rgb(48, 48, 44);
    a {
      padding: 18px 66px;
      color: white;
      transition: all 0.3s;
      &:hover {
        background-color: rgb(10, 104, 162);
      }
      &.router-link-exact-active {
        background-color: rgb(10, 104, 162);
      }
      &.router-link-active {
        background-color: rgb(10, 104, 162);
      }
    }
  }
  .search-input {
    /deep/ .el-input-group__append {
      border: 1px solid #c7343c;
      .search-btn {
        background-color: #c7343c;
        border: none;
        color: white;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}
</style>